<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="store">
        <div class="storeNavt">
            <div>
                <div><span class="glyphicon glyphicon-home"></span></div>
                <div>商户管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-home"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    商户管理
                </div>
            </div>
        </div>
        <div class="storeData">
            <div class="storeNav">
                <div class="seekStore">
                    <div>
                        <select @change="selectChange" v-model="selectType">
                              <option v-for="type in selectTypes">{{type}}</option>
                         </select>
                    </div>
                    <div class="seekInPut">
                        <input type="text" @keyup.delete="nullSeek" v-model="seekValue" placeholder="根据店铺名称搜索...">
                        <div class="serach" @click="seekIng">
                            <span class="glyphicon glyphicon-search"></span>
                        </div>
                    </div>
                </div>
                <div @click="addPopupClick" class="addStore">
                    <div><span class="glyphicon glyphicon-download-alt"></span>添加</div>
                </div>
            </div>
            <div class="storeDetails" v-loading.body="loading" element-loading-text="拼命加载中">
                <ul>
                    <li class="firstLi">
                        <div class="imgLi">商户LOGO</div>
                        <div>商户名称</div>
                        <div>账户余额</div>
                        <div>商户地址</div>
                        <div>商户账号</div>
                        <div>创建时间</div>
                        <div>操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div class="imgLi"><img :src="item.storeIcon | imgUrlFun" alt=""></div>
                        <el-tooltip :disabled="item.storeName.length > 6 ? false : true" :content="item.storeName" placement="bottom" effect="light">
                            <div>
                                {{item.storeName}}
                            </div>
                        </el-tooltip>
                        <div>{{item.amount}}</div>
                        <el-tooltip :disabled="item.storeAddress.length > 12 ? false : true" :content="item.storeAddress" placement="bottom" effect="light">
                            <div>
                                {{item.storeAddress}}
                            </div>
                        </el-tooltip>
                        <div>{{item.mobile}}</div>
                        <div>{{item.ctime | ctimeFun}}</div>
                        <div>
                            <small @click="detailsClick(index)"><span class="glyphicon glyphicon-th-list"></span>商户详情</small>
                            <small @click="waterClick(index)"><span class="glyphicon glyphicon-list-alt"></span>商户流水</small>
                            <small @click="messageClick(index)"><span class="glyphicon glyphicon-volume-up"></span>通知</small>
                            <small @click="deleteClick(index)">
                             <template>
                               <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                              </template>
                            </small>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSizeNum"
                                :current-page="currentPage" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}" v-loading.body="adding" element-loading-text="添加中...">
            <transition name="slide-fade">
                <div class="addMain" v-show="addShow">
                    <div class="popupTitle">
                        <h2>添加商户</h2>
                        <div @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>商户类别：</div>
                        <div class="SelectType">
                            <select v-model="addObj.typeId">
                              <option v-for="type in types">{{type}}</option>
                         </select>
                        </div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>商户账号(手机号)：</div>
                        <div><input type="text" v-model="addObj.mobile" placeholder="请输入手机号码"></div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>密码：</div>
                        <div><input type="text" v-model="addObj.pwd" placeholder="请输入账户密码"></div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>商户名称：</div>
                        <div><input type="text" v-model="addObj.storeName" placeholder="请输入商户名称"></div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>联系人：</div>
                        <div><input type="text" v-model="addObj.contact" placeholder="请输入联系人姓名"></div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>商户地址：</div>
                        <div><input type="text" v-model="addObj.storeAddress" placeholder="请输入商铺地址"></div>
                    </div>
                    <div class="promptC">
                        {{promptStr}}
                    </div>
                    <div class="addOper">
                        <button @click="addClick">添加</button>
                        <button @click="callClick">取消</button>
                    </div>
                </div>
            </transition>
        </div>
        <!--详情弹出框-->
        <div :class="{detailsPopup:isDetailsPopup,showdeta:isShowDeta}">
            <transition name="slide-fade">
                <div class="detailMain" v-show="detailShow">
                    <div class="popupTitle">
                        <h2>商户详情</h2>
                        <div @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addPone addPoneImg">
                        <div>商户LOGO：</div>
                        <div><img :src="storeObj.storeIcon | imgUrlFun" alt=""></div>
                    </div>
                    <div class="addPone">
                        <div>商户名称：</div>
                        <div>{{storeObj.storeName | strFun}}</div>
                    </div>
                    <div class="addPone">
                        <div>商户地址：</div>
                        <div>{{storeObj.storeAddress | strFun}}</div>
                    </div>
                    <div class="addPone">
                        <div>手机号：</div>
                        <div>{{storeObj.mobile | strFun}}</div>
                    </div>
                    <div class="addPone">
                        <div>联系人：</div>
                        <div>{{storeObj.contact | strFun}}</div>
                    </div>
                    <div class="addPone">
                        <div>商户介绍：</div>
                        <div>{{storeObj.salesInfo | strFun}}</div>
                    </div>
                    <div class="addPone">
                        <div>商户图集：</div>
                    </div>
                    <div class="addPone addAtlas">
                        <ul v-show="isImages">
                            <li v-for="ima in images">
                                <img :src="ima | imgUrlFun" alt="">
                            </li>
                        </ul>
                        <ul v-show="isnullImages">
                            <li>
                                <div>无</div>
                            </li>
                        </ul>
                    </div>
                    <div class="addOper">
                        <button @click="callClick">确认</button>
                    </div>
                </div>
            </transition>
        </div>
        <!--流水弹出框-->
        <div :class="{waterPopup:isWaterPopup,showWater:isShowWater}">
            <transition name="slide-fade">
                <div class="waterMain" v-show="waterShow">
                    <div class="popupTitle">
                        <h2>商户流水</h2>
                        <div @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="waterData">
                        <div class="waterDs">
                            <ul>
                                <li class="waterfirstLi">
                                    <div>用户头像</div>
                                    <div>用户昵称</div>
                                    <div>付款金额</div>
                                    <div>付款方式</div>
                                    <div>付款时间</div>
                                </li>
                                <li v-if="waterNull" class="waterNullLi">
                                    <div>暂时没有数据</div>
                                </li>
                                <li v-else class="waterdataLi" v-for="(water,index) in waters">
                                    <div>
                                        <div><img :src="water.consumerEntity.avatar" alt=""></div>
                                    </div>
                                    <div>{{water.consumerEntity.nickName}}</div>
                                    <div>{{water.amount | moneyFun}}</div>
                                    <div>{{water.paymentType | typeFun}}</div>
                                    <div>{{water.ctime | ctimeFun}}</div>
                                </li>
                                <li class="waterlastLi">
                                    <div class="waterlastSel">
                                        <el-pagination @current-change="waterhandleCurrentChange" :current-page="watercurrentPage" :page-size="waterpageSizeNum"
                                            layout="total, prev, pager, next, jumper" :total="watertotalNum">
                                            </el-pagination>
                                    </div>
                                    <div class="waterlastPag">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
        <!--添加通知-->
        <div :class="{addMessagePopup:isAddMessagePopup,showMessageAdd:isShowMessageAdd}" v-loading.body="adding" element-loading-text="添加中...">
            <transition name="slide-fade">
                <div class="addMessageMain" v-show="addMessageShow">
                    <div class="popupTitleMessage">
                        <h2>添加通知</h2>
                        <div @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addPoneMessage">
                        <div><small>*</small>通知主题：</div>
                        <div class="subject">
                            <textarea v-model="subjectMessage" placeholder="请输入通知主题，最多100字"></textarea>
                        </div>
                    </div>
                    <div class="addPoneMessage">
                        <div><small>*</small>通知内容：</div>
                        <div class="content">
                            <textarea v-model="contentMessage" placeholder="请输入通知内容，最多200字"></textarea>
                        </div>
                    </div>
                    <div class="promptCMessage">
                        {{promptStr}}
                    </div>
                    <div class="addOperMessage">
                        <button @click="addMessageClick">添加</button>
                        <button @click="callClick">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'store',
        data() {
            return {
                isImages: true,
                isnullImages: true,
                isAddMessagePopup: true,
                isShowMessageAdd: true,
                addMessageShow: true,
                subjectMessage: '',
                contentMessage: '',
                promptStr: '带 * 号为必填项',
                seekValue: '',
                isAddPopup: true,
                isDetailsPopup: true,
                isWaterPopup: true,
                isShowAdd: true,
                isShowDeta: true,
                isShowWater: true,
                addShow: false,
                detailShow: false,
                waterShow: false,
                // 商户数组  // { storeIcon: '', storeName: '3123123', storeAddress: '11', mobile: '13636898669', ctime: 1490870098000, storeInfo: '', }
                items: [
                ],
                its: [{ storeIcon: '', storeName: '3123123', storeAddress: '1111231231231', mobile: '13636898669', ctime: 1490870098000, storeInfo: '', }],
                itemDates: [],
                itemDateCopys: [],
                pageSizeNum: 10,
                totalNum: 0,
                currentPage: 1,
                nullShow: true,
                loading: false,
                adding: false,
                // 流水数组
                waters: [
                ],
                watertotalNum: 0,
                waterpageSizeNum: 10,
                watercurrentPage: 1,
                waterNull: true,
                // 商户详情对象
                storeObj: {
                    storeIcon: '',
                    storeName: '',
                    storeAddress: '',
                    mobile: '',
                    contact: '',
                    storeInfo: '',
                },
                // 添加用户对象
                addObj: {
                    typeId: '',
                    opid: '',
                    mobile: '',
                    pwd: '',
                    storeName: '',
                    contact: '',
                    storeAddress: ''
                },
                selectType: '所有',
                selectTypes: [
                    '所有',
                ],
                types: [
                ],
                // 商户图集
                images: [],
                allIndex: ''
            }
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "  " + hour + ":" + minute;
            },
            // 图片过滤
            imgUrlFun: function (val) {
                if (val) {
                    return "http://" + global.logIp + ":" + global.logFileport + "/files" + val
                } else {
                    return '/static/img/errimg.png'
                }
            },
            // 图片过滤
            strFun: function (val) {
                if (val) {
                    return val
                } else {
                    return '无'
                }
            },
            // 图片过滤
            typeFun: function (val) {
                if (val == 200) {
                    return '余额支付'
                } else {
                    return '微信支付'
                }
            },
            // 图片过滤
            moneyFun: function (val) {
                return val.toFixed(2) + ' 元'

            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')
        },
        methods: {
            // 汉字字母正则
            strReg: function (str) {
                var regu = "^([A-Za-z]|[\u4E00-\u9FA5]{1,50})+$"
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            strReg1: function (str) {
                var regu = "^({1,100})+$"
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 手机号码正则
            PhoneReg: function (str) {
                var regu = /^1[34578]\d{9}$/
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 商户设置每页个数
            handleSizeChange(val) {
                var self = this;
                self.pageSizeNum = val;
                self.loading = true
                self.getStoreAll({
                    typeId: '',
                    pageSize: val,
                    number: 1
                }).then((data) => {
                    self.loading = false

                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 商户点击分页
            handleCurrentChange(val) {
                var self = this;
                if (self.seekValue != '') {

                } else {
                    self.loading = true
                    self.getStoreAll({
                        typeId: '',
                        pageSize: this.pageSizeNum,
                        number: val
                    }).then((data) => {
                        self.loading = false

                        if (data.data.code == "200") {
                            if (data.data.data.content.length > 0) {
                                self.nullShow = false
                                self.items = data.data.data.content
                                self.totalNum = data.data.data.totalElements
                            } else {
                                self.nullShow = true
                            }
                        }
                    }).catch(msg => console.log(msg))
                }
            },
            // 流水点击分页
            waterhandleCurrentChange(val) {
                var self = this
                console.log(val)
                self.watercurrentPage = val
                var sss = self.allIndex
                self.getStorePaymentAll({
                    store_id: self.items[sss].id,
                    page_size: self.waterpageSizeNum,
                    number: val
                }).then((data) => {
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.waters = data.data.data.content
                            self.watertotalNum = data.data.data.totalElements
                            self.waterNull = false
                        } else {
                            self.waterNull = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 关闭弹窗
            callClick() {
                this.addShow = false;
                this.detailShow = false;
                this.waterShow = false;

                this.isShowMessageAdd = true;
                this.addMessageShow = false

                this.isShowAdd = true
                this.isShowDeta = true
                this.isShowWater = true
                this.typeId = '电子'
                this.opid = ''
                this.mobile = ''
                this.pwd = ''
                this.storeName = ''
                this.contact = ''
                this.storeAddress = ''
                this.images = []
            },
            // 弹出添加框
            addPopupClick() {
                this.isShowAdd = false;
                this.addShow = true;
                this.addObj.typeId = '电子'
                this.addObj.opid = ''
                this.addObj.mobile = ''
                this.addObj.pwd = ''
                this.addObj.storeName = ''
                this.addObj.contact = ''
                this.addObj.storeAddress = ''
            },
            // 添加商铺
            addClick() {
                var self = this;
                var nameTrue = this.strReg(this.addObj.storeName)
                var mobileTrue = this.PhoneReg(this.addObj.mobile)
                var contactressTrue = this.strReg(this.addObj.contact)
                var userId = sessionStorage.getItem('userId')
                this.addObj.opid = userId
                if (mobileTrue == true && nameTrue == true && this.addObj.storeAddress.length > 0 && contactressTrue == true) {
                    self.adding = true
                    self.getStoreAdd(self.addObj).then((data) => {
                        self.adding = false
                        if (data.data.code == "200") {
                            self.isShowAdd = true
                            self.addShow = false;
                            self.$message({
                                type: 'success',
                                message: '添加商户成功!'
                            });
                            self.typeId = '电子'
                            self.opid = ''
                            self.mobile = ''
                            self.pwd = ''
                            self.storeName = ''
                            self.contact = ''
                            self.storeAddress = ''
                            self.promptStr = '带 * 号为必填项目'
                            self.loading = true
                            self.getStoreAll({
                                typeId: '',
                                pageSize: self.pageSizeNum,
                                number: self.currentPage
                            }).then((data) => {
                                self.loading = false

                                if (data.data.code == "200") {
                                    if (data.data.data.content.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data.content
                                        self.totalNum = data.data.data.totalElements
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))

                } else {
                    if (mobileTrue != true) {
                        this.promptStr = '商户账号必须为手机号码'
                    } else if (nameTrue != true) {
                        this.promptStr = '商户名称必须为中文或者字母'
                    } else if (this.addObj.storeAddress.length == 0) {
                        this.promptStr = '商户地址为必选项'
                    } else if (contactressTrue != true) {
                        this.promptStr = '商户联系人必须为中文或者字母'
                    }
                }
            },
            // 商铺详情弹出框
            detailsClick(index) {
                var self = this;
                self.isShowDeta = false
                self.detailShow = true;
                self.getStoreDetails({
                    id: self.items[index].id
                }).then((data) => {

                    if (data.data.code == "200") {
                        data.data.data.storeInfo = data.data.data.storeInfo == null ? '无' : data.data.data.storeInfo
                        var arrs = data.data.data.storeImages
                        console.log(data.data.data.storeImages)
                        if (arrs != null) {
                            self.images = arrs.split(',')
                            self.isnullImages = false
                            self.isImages = true
                        } else {
                            self.isImages = false
                            self.isnullImages = true
                        }
                        self.storeObj = data.data.data
                    }
                }).catch(msg => console.log(msg))
            },
            // 商铺流水弹出框
            waterClick(index) {
                var self = this
                this.isShowWater = false;
                this.waterShow = true;
                this.allIndex = index;
                self.getStorePaymentAll({
                    store_id: self.items[index].id,
                    page_size: self.waterpageSizeNum,
                    number: self.watercurrentPage
                }).then((data) => {

                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.waters = data.data.data.content
                            self.watertotalNum = data.data.data.totalElements
                            self.waterNull = false
                        } else {
                            self.waterNull = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 通知商户弹出框
            messageClick(index) {
                this.isShowMessageAdd = false;
                this.addMessageShow = true
                this.messageIndex = index
            },
            // 添加通知
            addMessageClick() {
                var self = this;
                // 添加通知
                if (self.subjectMessage.length <= 100 && self.contentMessage.length <= 200) {
                    self.promptStr = '带 * 号为必填项'
                    var userId = sessionStorage.getItem('userId')
                    self.adding = true
                    self.getMessageAdd({
                        opid: userId,
                        subject: self.subjectMessage,
                        content: self.contentMessage,
                        storeId: self.items[self.messageIndex].id
                    }).then((data) => {

                        self.adding = false
                        if (data.data.code == "200") {
                            self.isShowMessageAdd = true
                            self.addMessageShow = false
                            self.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            self.contentMessage = ''
                            self.contentMessage = ''
                        }
                    }).catch(msg => console.log(msg))
                } else {
                    if (self.subjectMessage.length > 100) {
                        this.promptStr = '通知主题字数不能超过100'
                    } else if (self.contentMessage.length > 200) {
                        this.promptStr = '通知内容字数不能超过200'
                    }
                }
            },
            // 删除商户弹出框
            deleteClick(index) {
                var self = this;
                var userId = sessionStorage.getItem('userId')
                var nameStr = "此操作将删除 " + this.items[index].storeName + " 该账户,是否继续 ?"
                self.$confirm(nameStr, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.getStoreDel({
                        opid: userId,
                        id: self.items[index].id
                    }).then((data) => {

                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            self.loading = true
                            self.getStoreAll({
                                typeId: '',
                                pageSize: self.pageSizeNum,
                                number: self.currentPage
                            }).then((data) => {
                                self.loading = false
                                if (data.data.code == "200") {
                                    if (data.data.data.content.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data.content
                                        self.totalNum = data.data.data.totalElements
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 搜索框为空时触发 获取所有列表
            nullSeek() {
                var self = this
                if (self.seekValue.length == 0) {
                    self.loading = true
                    self.getStoreAll({
                        typeId: '',
                        pageSize: self.pageSizeNum,
                        number: self.currentPage
                    }).then((data) => {
                        self.loading = false

                        if (data.data.code == "200") {
                            if (data.data.data.content.length > 0) {
                                self.nullShow = false
                                self.items = data.data.data.content
                                self.totalNum = data.data.data.totalElements
                            } else {
                                self.nullShow = true
                            }
                        }
                    }).catch(msg => console.log(msg))
                }
            },
            // 模糊搜索
            seekIng() {
                var self = this;
                self.selectType = '所有'
                if (self.seekValue.length > 0) {
                    self.loading = true
                    self.getStoreSeek({
                        name: self.seekValue
                    }).then((data) => {
                        self.loading = false

                        if (data.data.code == "200") {
                            if (data.data.data.length > 0) {
                                self.nullShow = false
                                self.items = data.data.data
                                self.totalNum = data.data.data.length
                            } else {
                                self.nullShow = true
                            }
                        }
                    }).catch(msg => console.log(msg))
                }
            },
            // 类别选择
            selectChange() {
                var self = this;
                self.seekValue = ''
                if (self.selectType != '所有') {
                    self.loading = true
                    self.getStoreAll({
                        typeId: self.selectType,
                        pageSize: self.pageSizeNum,
                        number: self.currentPage
                    }).then((data) => {
                        self.loading = false

                        if (data.data.code == "200") {
                            if (data.data.data.content.length > 0) {
                                self.nullShow = false
                                self.items = data.data.data.content
                                self.totalNum = data.data.data.totalElements
                            } else {
                                self.nullShow = true
                            }
                        }
                    }).catch(msg => console.log(msg))
                }
            },
            ...mapActions(['getStoreAll','getStoreAdd','getStoreDel','getStoreSeek','getStoreDetails','getTypeAll','getMessageAdd','getStorePaymentAll'])
        }
    }

</script>

<style scoped src="../../assets/css/store.css">

</style>